<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--移动端的兼容-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>买卖</title>
    <!--公共的css样式-->
    <link rel="stylesheet" type="text/css" href="../common_css/common.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/input_password_css.css" />
    <script src="../common_js/common_font.js"></script>
    <link rel="stylesheet" type="text/css" href="../common_css/jquery-weui.css" />
    <script src="../common_js/jquery-3.2.1.min.js"></script>
    <script src="../common_js/jquery-weui.js"></script>
    <style type="text/css">
        /*<!--最外div-->*/
        
        body,
        html {
            height: 100%;
            width: 100%;
        }
        
        #exchangeprice_main {
            width: 100%;
            min-width: 320px;
            height: 100%;
            /*border: 2px solid yellow;*/
            box-sizing: border-box;
            background-color: #F7F7F7;
            position: relative;
            overflow: auto;
        }
        /*头部*/
        
        #account_statistic_header {
            width: 100%;
            height: 50px;
            background-color: #21538D;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 18px;
            position: fixed;
            top: 0px;
            left: 0px;
        }
        /*箭头*/
        
        #account_statistic_header span {
            float: left;
            font-size: 25px;
        }
        /*帮助字体*/
        
        #account_statistic_header font {
            margin-left: -30px;
            font-size: 18px;
        }
        /*身体的外部*/
        
        #exchangeprice_body {
            width: 100%;
            overflow: auto;
            margin-top: 50px;
            /*border: 5px solid red;*/
        }
        /*层的切换*/
        
        #tab .ul-meun {
            list-style-type: none;
            /*border: 1px solid red;*/
            width: 100%;
            height: 50px;
            background-color: white;
        }
        /*点击切换的每一个li*/
        
        #tab .ul-meun li {
            float: left;
            width: 20%;
            height: 45px;
            text-align: center;
            line-height: 45px;
            /*border: 1px solid blue;*/
            color: #CDCDCD;
            font-size: 14px;
            font-weight: bold;
        }
        /*//自定义的一个公共样式,方便调用*/
        
        .active {
            display: inline-block;
            height: 50px;
            border-bottom: 2px solid #416B9D;
            color: #416B9D;
            font-weight: bold;
        }
        /*每一个切换层的div的内容*/
        
        .divitem1 {
            width: 100%;
            display: none;
            background-color: white;
        }
        /*切换里边等待上架的内容*/
        
        .wait_body_content {
            margin-top: 10px;
            overflow: hidden;
            border-bottom: 1px solid #E1E1E1;
            /*border: 2px solid yellow;*/
        }
        /*切换内容的头部*/
        
        .exchangeprice_wait_title {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #D8D8D8;
            font-size: 14px;
        }
        /*平均的四个div内容*/
        
        .exchangeprice_wait_title_1 {
            width: 25%;
            height: 45px;
            float: left;
            line-height: 45px;
            text-align: center;
            margin: 0px auto;
            font-size: 12px;
        }
        /*切换内容的身体*/
        
        .exchangeprice_wait_body {
            width: 100%;
            overflow: hidden;
            /*border: 1px solid green;*/
        }
        /*姓名*/
        
        .wait_title_1_name {
            /*border: 2px solid green;*/
            overflow: auto;
            font-size: 14px;
            margin-left: 5px;
        }
        /*切换的每一个身体里的内容*/
        
        .exchangeprice_wait_title_2 {
            width: 25%;
            height: 45px;
            float: left;
            font-size: 14px;
            text-align: center;
        }
        /*头像*/
        
        .wait_title_1_img {
            border: 1px solid blue;
        }
        
        .wait_title_1_img img {
            width: 45px;
            height: 25px;
            border: 1px solid red;
        }
        
        .title_juzhong {
            line-height: 40px;
            font-size: 12px;
            color: #8FD93E;
        }
        
        .wait_title_1_name_nicheng {
            margin-top: 5px;
            color: #A2A2A2;
            font-size: 12px;
        }
        
        .wait_title_1_name_num {
            margin-top: 5px;
            color: #B9B9B9;
        }
        
        .title_2_day {
            margin-top: 5px;
            color: #808080;
            font-size: 12px;
        }
        
        .title_2_time {
            margin-top: -5px;
            color: #808080;
            font-size: 12px;
        }
        /*单价*/
        
        .title_1_unitprice {
            font-size: 12px;
            color: #E6E6EA;
        }
        /*清楚浮动的p*/
        
        .tab_center {
            clear: both;
            width: 100%;
            height: 10px;
            background-color: #F7F7F7;
        }
        /*明细里边的内容*/
        
        .account_statistic_body_1 {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: white;
            border-bottom: 1px solid #F7F7F7;
            font-size: 12px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
        
        .statistic_body_1_left {
            float: left;
            margin-left: 15px;
            color: #6F6F6F;
        }
        
        .statistic_body_1_right {
            float: right;
            margin-right: 15px;
        }
        
        .icon_fanhui {
            font-size: 30px;
        }
        /*可用金额和持仓抢购*/
        
        .divitem1_usermoney {
            width: 100%;
            height: 50px;
            /*border: 1px solid red;*/
            margin: 0px;
            padding: 0px;
        }
        
        .usermoney_content {
            width: 50%;
            height: 40px;
            margin-top: 5px;
            border-right: 1px solid #F2F2F2;
            float: left;
        }
        
        .usermoney_content_1 {
            width: 70%;
            height: 40px;
            /*border: 1px solid;*/
            margin: 0px auto;
            display: -webkit-box;
        }
        /*可用金额和持仓市值的图片*/
        
        .usermoney_content_1_img {
            width: 18px;
            height: 40px;
            margin-left: 15%;
            margin-right: 4px;
            /*border: 1px solid red;*/
            display: -webkit-box;
        }
        
        .usermoney_content_1_img img {
            width: 18px;
            height: 18px;
            margin-top: 10px;
        }
        
        .usermoney_content_1_commentory {
            -webkit-box-flex: 1;
            display: -webkit-box;
            /*-webkit-box-align: center;*/
            -webkit-box-orient: vertical;
            /*border: 1px solid green;*/
            height: 40px;
        }
        
        .usermoney_content_1_commentory p:first-child {
            font-size: 12px;
            color: #6B6B6B;
            margin-top: 3px;
        }
        
        .usermoney_content_1_commentory p:last-child {
            font-size: 8px;
            color: #323232;
            margin-top: 2px;
        }
        /*购买的内容*/
        /*内容部分使用flex布局*/
        
        .Business_content {
            color: #565656;
            display: flex;
            flex-direction: row;
            padding: 10px;
        }
        
        .Business_content_left {
            position: relative;
            flex-grow: 1;
        }
        
        .Business_content_right {
            border: 1px solid #FF0B0B;
            flex-grow: 1;
            margin-left: 10px;
            padding: 8px;
        }
        
        .Business_content_left_show {
            font-size: 12px;
            /*padding-left: 10px;*/
            /*padding-right: 10px;*/
            border: 1px solid #FF0B0B;
            display: flex;
            height: 48px;
            line-height: 48px;
            margin-bottom: 10px;
            justify-content: center;
            width: 100%;
            text-align: center;
        }
        
        .Business_content_left_show_blue {
            font-size: 12px;
            border: 1px solid #21538D;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            line-height: 48px;
            margin-bottom: 10px;
            width: 100%;
            text-align: center;
        }
        
        .Business_content_left_show>:first-child {
            flex-grow: 1;
        }
        
        .Business_content_left_show>:last-child {
            display: flex;
            justify-content: flex-end;
            flex-grow: 1;
        }
        
        .Business_content_left_ab {
            border: 1px solid #FF0B0B;
            display: flex;
            flex-direction: row;
            height: 48px;
        }
        
        .Business_content_left_ab_blue {
            border: 1px solid #21538D;
            display: flex;
            flex-direction: row;
            height: 48px;
        }
        
        .Business_content_left_ab_fn {
            overflow: hidden;
            width: 48px;
            height: 48px;
        }
        
        .Business_content_left_ab_fn>img {
            display: block;
            width: 100%;
            height: 47px;
        }
        
        .Business_content_left_ab_val {
            line-height: 40px;
            display: flex;
            font-size: 15px;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }
        
        .Business_content_left_info {
            margin: 5px 0px;
            display: flex;
            flex-direction: row;
        }
        
        .Business_content_left_info>div {
            flex-grow: 1;
        }
        
        .Business_content_left_info>div>div {
            border: 1px solid #FF0B0B;
            font-size: 14px;
            border-radius: 5px;
            color: #FF0B0B;
            width: 80px;
            text-align: center;
        }
        
        .Business_content_left_info>:first-child>div {
            float: left;
        }
        
        .Business_content_left_info>:last-child>div {
            float: right;
        }
        
        .Business_content_left_info>div>div>span {
            color: #323232;
        }
        /*转让的样式蓝色的部分*/
        
        .Business_content_left_info_blue {
            margin: 5px 0px;
            display: flex;
            flex-direction: row;
        }
        
        .Business_content_left_info_blue>div {
            flex-grow: 1;
        }
        
        .Business_content_left_info_blue>div>div {
            border: 1px solid #21538D;
            font-size: 14px;
            border-radius: 5px;
            color: #FF0B0B;
            width: 80px;
            text-align: center;
        }
        
        .Business_content_left_info_blue>:first-child>div {
            float: left;
        }
        
        .Business_content_left_info_blue>:last-child>div {
            float: right;
        }
        
        .Business_content_left_info_blue>div>div>span {
            color: #000000;
        }
        
        .Business_content_left_time {
            margin: 5px 0px;
        }
        
        .Business_content_left_time>div {
            font-size: 14px;
        }
        
        .Business_content_left_time>div>span {
            color: #FF0B0B;
        }
        /*购买的部分*/
        
        .Business_content_left_choice {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        
        .Business_content_left_choice>div {
            padding: 0px 3px;
            font-size: 13px;
            border: 1px solid #FF0B0B;
            border-radius: 3px;
        }
        /*蓝色的部分(转让)*/
        
        .Business_content_left_choice_blue {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        
        .Business_content_left_choice_blue>div {
            padding: 0px 3px;
            font-size: 13px;
            border: 1px solid #21538D;
            border-radius: 3px;
        }
        
        .Business_content_left_buybtn {
            font-size: 16px;
            margin-top: 10px;
            background-color: #FE0000;
            color: #FFFFFF;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 3px;
        }
        
        .Business_content_left_buybtn_blue {
            font-size: 16px;
            margin-top: 10px;
            background-color: #21538D;
            color: #FFFFFF;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 3px;
        }
        /*内容右部内存*/
        
        .Business_content_right>div {
            clear: both;
            height: 20px;
            /*border: 1px solid blue;*/
            line-height: 20px;
            margin-top: 3px;
        }
        
        .Business_content_right>div>span {
            font-size: 12px;
        }
        
        .Business_content_right>div>:first-child {
            margin-right: 8px;
        }
        
        .Business_content_right>div>:last-child {
            float: right;
            height: 20px;
            line-height: 25px;
        }
        
        .Business_content_right_line {
            height: 0px !important;
            margin: 12px 0px !important;
            border-top: 1px solid #FF0B0B !important;
        }
        
        .Business_content_right_line_1 {
            border-top: 1px solid #21538D !important;
            height: 0px !important;
            margin: 12px 0px !important;
        }
        /*股票列表使用table布局*/
        
        .Business_list {
            width: 100%;
            display: table;
        }
        
        .Business_list_nav {
            display: table-row;
            color: #888888;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
        }
        
        .Business_list_item {
            display: table-row;
            height: 60px;
        }
        
        .Business_list_nav>div,
        .Business_list_item>div {
            color: #888888;
            display: table-cell;
            border-bottom: 1px solid #F7F7F7;
            text-align: center;
            font-size: 14px;
        }
        
        .Business_list_item>div>div {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        
        .Business_list_item>:last-child {
            vertical-align: middle;
        }
        
        .Business_list_item>div>:last-child {
            color: #C5C5C5;
        }
        /*//转让成功的弹出框*/
        
        .zhuanrangsucess,
        .zhuanrangsucess_1 {
            width: 120px;
            height: 40px;
            background-color: black;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 14px;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
        }
        
        .zhuanrangsucess {
            display: none;
        }
        
        .zhuanrangsucess_1 {
            display: none;
        }
        /*转让购买的支付弹出框*/
        
        .zhuangranggoumai_pay {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            /*border: 1px solid red;*/
        }
        
        .buy_pay_bottom {
            position: absolute;
            bottom: 0px;
            left: 0px;
            /*border: 1px solid blue;*/
            width: 100%;
            height: 200px;
            /*background-color: white;*/
        }
        
        .buy_pay_bottom_shang {
            width: 100%;
            height: 150px;
            /*border: 1px solid red;*/
            background-color: white;
            border-radius: 20px;
        }
        
        .buy_pay_bottom_shang_1 {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 2px solid #F7F7F7;
            min-width: 320px;
            /*border: 1px solid yellow;*/
        }
        
        .buy_pay_bottom_shang_1_center {
            width: 50%;
            height: 50px;
            /*border: 1px solid blue;*/
            margin: 0px auto;
            text-align: center;
            box-sizing: border-box;
            min-width: 320px;
        }
        
        #shang_1_center {
            width: 50%;
            height: 50px;
            margin: auto;
            /*border: 1px solid yellow;*/
        }
        
        .buy_pay_bottom_shang_1_center_img {
            float: left;
            height: 46px;
            margin-left: 10px;
            /*border: 1px solid green;*/
        }
        
        .buy_pay_bottom_shang_1_center_img img {
            width: 25px;
            height: 25px;
            margin: 12px 0px 0px 10px;
        }
        
        .buy_pay_bottom_shang_1_center_name {
            font-size: 16px;
            font-weight: bold;
            float: left;
            margin-left: 10px;
            /*border: 1px solid blue;*/
        }
        
        .buy_pay_bottom_xia {
            width: 100%;
            height: 40px;
            /*border: 1px solid green;*/
            line-height: 40px;
            text-align: center;
            background-color: white;
            border-radius: 10px;
            margin-top: 5px;
        }
        /*弹出框确认订单*/
        
        .zhuangranggoumai_pay_1 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            /*margin:0px auto;*/
            display: none;
            /*border: 1px solid red;*/
        }
        
        .sure_order_content {
            width: 100%;
            height: 340px;
            /*border: 1px solid red;*/
            position: absolute;
            bottom: 0px;
            background-color: white;
        }
        
        .sure_order_content_word {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #F1F1F1;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            color: #323232;
            letter-spacing: 0.76px;
        }
        
        .sure_order_content_word_1 {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #F1F1F1;
            line-height: 40px;
            font-size: 14px;
            letter-spacing: 0.67px;
        }
        
        .sure_order_1 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.67px;
            margin-left: 3.2%;
        }
        
        .sure_order_2 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #323232;
            letter-spacing: 0.67px;
            margin-left: 10px;
        }
        
        .sure_order_3 {
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.67px;
            margin-left: 10px;
        }
        
        .sure_order_4 {
            font-family: "PingFangSC-Regular";
            font-size: 9px;
            color: rgba(107, 107, 107, 0.40);
            letter-spacing: 0.43px;
            margin-left: 10px;
        }
        
        .sure_order_content_word_2 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgba(-2147483648, -2147483648, -2147483648, 0.40);
            /*border: 1px solid blue;*/
        }
        
        .sure_order_5 {
            /*font-family: "PingFangSC-Regular";*/
            font-size: 6px !important;
            color: rgba(-2147483648, -2147483648, -2147483648, 0.40);
            /*line-height: 10px;*/
        }
        
        .sure_order_6 {
            /*font-family: "PingFangSC-Regular";*/
            font-size: 6px !important;
            color: #21538D;
            /*line-height: 10px;*/
        }
        
        .sure_order_content_word_3 {
            width: 93%;
            height: 35px;
            background: #1E5390;
            border-radius: 6px;
            font-family: "PingFangSC-Regular";
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0.67px;
            text-align: center;
            line-height: 35px;
            margin: auto;
            margin-top: 10px;
        }
        /*//请输入支付密码弹出框*/
        
        .zhuangranggoumai_pay_2 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            /*margin:0px auto;*/
            display: none;
            /*border: 1px solid red;*/
        }
        
        .sure_order_content_1 {
            width: 100%;
            height: 120px;
            /*border: 1px solid red;*/
            position: absolute;
            bottom: 0px;
            background-color: white;
        }
        /*输入的密码框*/
        
        .sure_order_content_input {
            width: 100%;
            height: 50px;
            /*border: 1px solid blue;*/
        }
        
        .sure_order_content_input input {
            width: 16.66%;
            height: 40px;
            float: left;
            border: 1px solid #6B6B6B;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            margin-top: 5px;
        }
        /*转让的弹出框*/
        
        .zhuangranggoumai_pay_3 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            /*margin:0px auto;*/
            display: none;
            /*border: 1px solid red;*/
        }
        
        .sure_order_content_2 {
            width: 100%;
            height: 310px;
            /*border: 1px solid red;*/
            position: absolute;
            bottom: 0px;
            background-color: white;
        }
        /*实时匹配*/
        
        .c-ball0,
        .c-ball1 {
            left: -1px;
            top: 57px;
            position: absolute;
            z-index: 999;
            height: 226px;
            overflow-y: auto;
            background: #fff;
            width: 101%;
            box-sizing: border-box;
            padding-left: 13px;
        }
        
        .c-ball0 li,
        .c-ball1 li {
            list-style: none;
            line-height: 58px;
        }
        
        .c-ball0 li .c-name0,
        .c-ball1 li .c-name1 {
            margin-right: 10px;
        }
        
        .onnn {
            font-size: 12px;
            font-weight: 700;
            color: red;
        }
        
        .noonetip0,
        .noonetip1 {
            position: absolute;
            background: #fff;
            width: 100%;
            border: 1px solid #000;
            line-height: 38px;
            padding-left: 10px;
            top: 48px;
        }
    </style>
</head>

<body>
    <!--总部div-->
    <div id="exchangeprice_main">
        <!--头部-->
        <div id="account_statistic_header">
            <span class="iconfont icon-back icon_fanhui"></span>
            <font>买卖</font>
        </div>
        <!--身体-->
        <div id="exchangeprice_body">
            <div class="weui-pull-to-refresh__layer">
                <div class='weui-pull-to-refresh__arrow'></div>
                <div class='weui-pull-to-refresh__preloader'></div>
                <div class="down">下拉刷新</div>
                <div class="up">释放刷新</div>
                <div class="refresh">正在刷新</div>
            </div>
            <!--点击切换层-->
            <div id="tab" class="j-tab">
                <ul class="ul-meun" id="ppp">
                    <li><span class="active">购买</span></li>
                    <li><span>转让</span></li>
                    <li><span>订单</span></li>
                    <li><span>已购</span></li>
                    <li><span>明细</span></li>
                </ul>
                <!--购买的内容-->
                <div class="divitem1" style="display: block;">
                    <!--内容部分-->
                    <div class="Business_content">
                        <!--内容左部-->
                        <div class="Business_content_left aaa">

                            <input type='text' id='index0' class="Business_content_left_show" placeholder="发行人姓名/代码" />
                            <ul class="c-ball0">
                                <!--     <li><span class="c-name0">超人</span><span class="c-math0">0</span></li> -->

                            </ul>
                            <div class="noonetip0">
                                没有合适的匹配项
                            </div>
                            <div class="Business_content_left_ab">
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/减@2x.png" />
                                </div>
                                <div class="Business_content_left_ab_val">----</div>
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/加@2x.png" /></div>
                            </div>
                            <div class="Business_content_left_info">
                                <div>
                                    <div>跌停<span> - -</span></div>
                                </div>
                                <div>
                                    <div>涨停<span> - -</span></div>
                                </div>
                            </div>
                            <div class="Business_content_left_ab">
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/减@2x.png" />
                                </div>
                                <div class="Business_content_left_ab_val">----</div>
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/加@2x.png" /></div>
                            </div>
                            <div class="Business_content_left_time">
                                <div>可购<span>0</span>秒</div>
                            </div>
                            <div class="Business_content_left_choice">
                                <div>全仓</div>
                                <div>半仓</div>
                                <div>1/3仓</div>
                                <div>1/4仓</div>
                            </div>
                            <div class="Business_content_left_buybtn">购买</div>
                        </div>
                        <!--内容右部-->
                        <div class="Business_content_right">
                            <div><span>转让5</span><span>--</span><span>--</span></div>
                            <div><span>转让4</span><span>--</span><span>--</span></div>
                            <div><span>转让3</span><span>--</span><span>--</span></div>
                            <div><span>转让2</span><span>--</span><span>--</span></div>
                            <div><span>转让1</span><span>--</span><span>--</span></div>
                            <div class="Business_content_right_line"></div>
                            <div style="margin-top: -3px;"><span>购买1</span><span>--</span><span>--</span></div>
                            <div><span>购买2</span><span>--</span><span>--</span></div>
                            <div><span>购买3</span><span>--</span><span>--</span></div>
                            <div><span>购买4</span><span>--</span><span>--</span></div>
                            <div><span>购买5</span><span>--</span><span>--</span></div>
                        </div>
                    </div>
                    <p class="tab_center"></p>
                    <!--股票列表-->
                    <div class="Business_list">
                        <div class="Business_list_nav">
                            <div>名称/代码</div>
                            <div>持有/可转(秒)</div>
                            <div>现价/成本(元)</div>
                            <div>盈亏(元)</div>
                        </div>
                        <div class="Business_list_item">
                            <div>
                                <div>李雯雯</div>
                                <div>800001</div>
                            </div>
                            <div>
                                <div>853146.52</div>
                                <div>-28.450%</div>
                            </div>
                            <div>
                                <div>27.152</div>
                                <div>17.152</div>
                            </div>
                            <div>127.152</div>
                        </div>
                        <div class="Business_list_item">
                            <div>
                                <div>李雯雯</div>
                                <div>800001</div>
                            </div>
                            <div>
                                <div>853146.52</div>
                                <div>-28.450%</div>
                            </div>
                            <div>
                                <div>27.152</div>
                                <div>17.152</div>
                            </div>
                            <div>127.152</div>
                        </div>
                    </div>
                </div>
                <!--转让的内容-->
                <div class="divitem1">
                    <!--内容部分-->
                    <div class="Business_content">
                        <!--内容左部-->
                        <div class="Business_content_left bbb">
                            <input class="Business_content_left_show_blue" id='index1' placeholder="发行人姓名/代码" />
                            <ul class="c-ball1">

                                <!-- <li><font class="c-name1">命名</font><font class="c-math1">123213</font></li> -->


                            </ul>
                            <div class="noonetip1">
                                没有合适的匹配项
                            </div>
                            <div class="Business_content_left_ab_blue">
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/蓝色 减@2x.png" />
                                </div>
                                <div class="Business_content_left_ab_val">----</div>
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/蓝色 加@2x.png" /></div>
                            </div>
                            <div class="Business_content_left_info_blue">
                                <div>
                                    <div>跌停<span> - -</span></div>
                                </div>
                                <div>
                                    <div>涨停<span> - -</span></div>
                                </div>
                            </div>
                            <div class="Business_content_left_ab_blue">
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/蓝色 减@2x.png" />
                                </div>
                                <div class="Business_content_left_ab_val">--</div>
                                <div class="Business_content_left_ab_fn">
                                    <img src="../commonimg/蓝色 加@2x.png" /></div>
                            </div>
                            <div class="Business_content_left_time">
                                <div>可转<span>0</span>秒</div>
                            </div>
                            <div class="Business_content_left_choice_blue">
                                <div>全仓</div>
                                <div>半仓</div>
                                <div>1/3仓</div>
                                <div>1/4仓</div>
                            </div>
                            <div class="Business_content_left_buybtn_blue">转让</div>
                        </div>
                        <!--内容右部-->
                        <div class="Business_content_right" style="border: 1px solid #21538D;">
                            <div><span>转让5</span><span>--</span><span>--</span></div>
                            <div><span>转让4</span><span>--</span><span>--</span></div>
                            <div><span>转让3</span><span>--</span><span>--</span></div>
                            <div><span>转让2</span><span>--</span><span>--</span></div>
                            <div><span>转让1</span><span>--</span><span>--</span></div>
                            <div class="Business_content_right_line_1"></div>
                            <div style="margin-top: -3px;"><span>购买1</span><span>--</span><span>--</span></div>
                            <div><span>购买2</span><span>--</span><span>--</span></div>
                            <div><span>购买3</span><span>--</span><span>--</span></div>
                            <div><span>购买4</span><span>--</span><span>--</span></div>
                            <div><span>购买5</span><span>--</span><span>--</span></div>
                        </div>
                    </div>
                    <p class="tab_center"></p>
                    <!--股票列表-->
                    <div class="Business_list">
                        <div class="Business_list_nav">
                            <div>名称/代码</div>
                            <div>持有/可转(秒)</div>
                            <div>现价/成本(元)</div>
                            <div>盈亏(元)</div>
                        </div>
                        <div class="Business_list_item">
                            <div>
                                <div>李雯雯</div>
                                <div>800001</div>
                            </div>
                            <div>
                                <div>853146.52</div>
                                <div>-28.450%</div>
                            </div>
                            <div>
                                <div>27.152</div>
                                <div>17.152</div>
                            </div>
                            <div>127.152</div>
                        </div>
                        <div class="Business_list_item">
                            <div>
                                <div>李雯雯</div>
                                <div>800001</div>
                            </div>
                            <div>
                                <div>853146.52</div>
                                <div>-28.450%</div>
                            </div>
                            <div>
                                <div>27.152</div>
                                <div>17.152</div>
                            </div>
                            <div>127.152</div>
                        </div>
                    </div>
                </div>
                <!--订单的内容-->
                <div class="divitem1">
                    <p class="tab_center"></p>
                    <!--订单内容的头部-->
                    <div class="exchangeprice_wait_title">
                        <div class="exchangeprice_wait_title_1">名称/代码</div>
                        <div class="exchangeprice_wait_title_1">委托价/时间</div>
                        <div class="exchangeprice_wait_title_1">委托量/成交量</div>
                        <div class="exchangeprice_wait_title_1">状态</div>
                    </div>
                    <!--切换内容的身体-->
                    <div class="exchangeprice_wait_body" v-for='item in dindandata'>
                        <!--每一条的内容-->
                        <div class="wait_body_content">
                            <div class="exchangeprice_wait_title_2">
                                <!--name和num-->
                                <div class="wait_title_1_name">
                                    <p class="wait_title_1_name_nicheng" v-html="item.name"></p>
                                    <p class="wait_title_1_name_num" v-html="item.starSn"></p>
                                </div>
                            </div>
                            <div class="exchangeprice_wait_title_2">
                                <p class="wait_title_1_name_nicheng" v-html="item.price"></p>
                                <p class="wait_title_1_name_num" v-html="item.createTime"></p>
                            </div>
                            <div class="exchangeprice_wait_title_2">
                                <p class="wait_title_1_name_nicheng" v-html="item.count"></p>
                                <p class="wait_title_1_name_num" v-html="item.allcount"></p>
                            </div>
                            <div class="exchangeprice_wait_title_2 title_juzhong">
                                <span v-html='item.payType'></span>
                            </div>
                            <!--每一条的内容的结尾-->
                        </div>
                    </div>
                    <!--最新行价的内容的结束div-->
                </div>
                <!--已购的内容-->
                <div class="divitem1">
                    <p class="tab_center"></p>
                    <!--可用金额和持仓市值-->
                    <div class="divitem1_usermoney">
                        <!--可用金额的内容左侧-->
                        <div class="usermoney_content">
                            <div class="usermoney_content_1">
                                <!--//放图片的div-->
                                <div class="usermoney_content_1_img"><img src="../commonimg/可用金额@2x.png" /></div>
                                <!--放解说的div-->
                                <div class="usermoney_content_1_commentory">
                                    <p>可用金额(元)</p>
                                    <p>12003.00</p>
                                </div>
                            </div>
                        </div>
                        <!--可用金额的内容右侧-->
                        <div class="usermoney_content">
                            <div class="usermoney_content_1">
                                <!--//放图片的div-->
                                <div class="usermoney_content_1_img"><img src="../commonimg/持仓@2x.png" /></div>
                                <!--放解说的div-->
                                <div class="usermoney_content_1_commentory">
                                    <p>持仓市值(元)</p>
                                    <p>35225.00</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="tab_center"></p>
                    <!--订单内容的头部-->
                    <div class="exchangeprice_wait_title">
                        <div class="exchangeprice_wait_title_1">名称/代码</div>
                        <div class="exchangeprice_wait_title_1">持有/可转(秒)</div>
                        <div class="exchangeprice_wait_title_1">现价/成本(元)</div>
                        <div class="exchangeprice_wait_title_1">盈亏(元)</div>
                    </div>
                    <!--切换内容的身体-->
                    <div class="exchangeprice_wait_body" v-for='item in hasbuy'>
                        <!--每一条的内容-->
                        <div class="wait_body_content">
                            <div class="exchangeprice_wait_title_2">
                                <!--name和num-->
                                <div class="wait_title_1_name">
                                    <p class="wait_title_1_name_nicheng" v-html='item.name'></p>
                                    <p class="wait_title_1_name_num" v-html='item.starSn'></p>
                                </div>
                            </div>
                            <div class="exchangeprice_wait_title_2">
                                <p class="wait_title_1_name_nicheng" v-html="item.hascount"></p>
                                <p class="wait_title_1_name_num" v-html="item.canSoldCount"></p>
                            </div>
                            <div class="exchangeprice_wait_title_2">
                                <p class="wait_title_1_name_nicheng" v-html="item.worth"></p>
                                <p class="wait_title_1_name_num" v-html="item.costPrice"></p>
                            </div>
                            <div class="exchangeprice_wait_title_2 title_juzhong">
                                <span v-html='item.willmoney'></span>
                            </div>
                            <!--每一条的内容的结尾-->
                        </div>
                        <!--每一条的内容-->
                    </div>
                    <!--最新行价的内容的结束div-->
                </div>
                <!--明细的内容-->
                <div class="divitem1">
                    <p class="tab_center"></p>
                    <!--当日委托-->
                    <div class="account_statistic_body_1" id="the_day_dail">
                        <div class="statistic_body_1_left">
                            当日委托
                        </div>
                        <div class="statistic_body_1_right">
                            <span class="iconfont icon-more"></span>
                        </div>
                    </div>
                    <!--当日成交-->
                    <div class="account_statistic_body_1" id="the_day_done">
                        <div class="statistic_body_1_left">
                            当日成交
                        </div>
                        <div class="statistic_body_1_right">
                            <span class="iconfont icon-more"></span>
                        </div>
                    </div>
                    <p class="tab_center"></p>
                    <!--历史委托-->
                    <div class="account_statistic_body_1" id="history_depute">
                        <div class="statistic_body_1_left">
                            历史委托
                        </div>
                        <div class="statistic_body_1_right">
                            <span class="iconfont icon-more"></span>
                        </div>
                    </div>
                    <!--历史成交-->
                    <div class="account_statistic_body_1" id="history_dail">
                        <div class="statistic_body_1_left">
                            历史成交
                        </div>
                        <div class="statistic_body_1_right">
                            <span class="iconfont icon-more"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--身体底部div-->
        </div>
        <!--转让成功-->
        <div class="zhuanrangsucess_1">
            转让成功
        </div>
        <!--支付成功-->
        <div class="zhuanrangsucess">
            支付成功
        </div>
        <!-----最外测div结束-------->
    </div>
    <!--转让购买支付的弹出框-->
    <div class="zhuangranggoumai_pay">
        <div class="buy_pay_bottom">
            <div class="buy_pay_bottom_shang">
                <div class="buy_pay_bottom_shang_1">
                    <!--微信支付-->
                    <div class="buy_pay_bottom_shang_1_center">
                        <div id="shang_1_center">
                            <div class="buy_pay_bottom_shang_1_center_img">
                                <img src="../commonimg/微信支付 @2x.png" />
                            </div>
                            <div class="buy_pay_bottom_shang_1_center_name">
                                微信支付
                            </div>
                        </div>
                    </div>
                </div>
                <!--支付宝支付-->
                <div class="buy_pay_bottom_shang_1">
                    <div class="buy_pay_bottom_shang_1_center">
                        <div id="shang_1_center">
                            <div class="buy_pay_bottom_shang_1_center_img">
                                <img src="../commonimg/支付宝支付@2x.png" />
                            </div>
                            <div class="buy_pay_bottom_shang_1_center_name">
                                支付宝支付
                            </div>
                        </div>
                    </div>
                </div>
                <!--秒星支付-->
                <div class="buy_pay_bottom_shang_1" style="border: none;">
                    <div class="buy_pay_bottom_shang_1_center">
                        <div id="shang_1_center">
                            <div class="buy_pay_bottom_shang_1_center_img">
                                <img src="../commonimg/充值@3x.png" />
                            </div>
                            <div class="buy_pay_bottom_shang_1_center_name">
                                秒星支付
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="buy_pay_bottom_xia">
                取消
            </div>
        </div>
    </div>
    <!--购买支付（确认订单）的弹出框-->
    <div class="zhuangranggoumai_pay_1">
        <div class="sure_order_content">
            <div class="sure_order_content_word">
                确认订单
            </div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单状态:</span><span class="sure_order_2">购买</span> </div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单信息:</span> <span class="sure_order_3">李雯雯</span><span class="sure_order_3">800001</span></div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单价格:</span> <span class="sure_order_3">1.96</span><span class="sure_order_3">元/秒</span></div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">购买时间:</span> <span class="sure_order_3">7200</span><span class="sure_order_3">秒</span></div>
            <div class="sure_order_content_word_1"> <span class="sure_order_1">支付金额:</span><span class="sure_order_2">117.92</span><span class="sure_order_2">元</span><span class="sure_order_4">(含交易手续费0.35元)</span></div>
            <div class="sure_order_content_word_2">
                <span style="margin-left: 3.2%;"><img src="../commonimg/对号.png"/></span>
                <span class="sure_order_5">本人已阅读并同意</span><span class="sure_order_6">《见到风险提示函》《见到买者自负承诺函》</span>
            </div>
            <div class="sure_order_content_word_3">
                立即支付
            </div>
        </div>
    </div>
    <!--请输入支付密码的弹出框-->
    <div class="zhuangranggoumai_pay_2">
        <div class="sure_order_content_1">
            <div class="sure_order_content_word">
                请输入支付密码
            </div>
            <div class="sure_order_content_input">
                <div class="ipt-box-nick_1 mb15-nick">
                    <input type="tel" maxlength="6" class="ipt-real-nick_1" autofocus="autofocus" />
                    <div class="ipts-box-nick_1">
                        <div class="ipt-fake-box_1">
                            <input type="password">
                            <input type="password">
                            <input type="password">
                            <input type="password">
                            <input type="password">
                            <input type="password">
                        </div>
                    </div>
                    <!--<div class="ipt-active-nick_1"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>-->
                </div>
            </div>
            <!--<div class="please_input_eenter"></div>-->
        </div>
    </div>
    <!--转让界面的确认订单-->
    <div class="zhuangranggoumai_pay_3">
        <div class="sure_order_content_2">
            <div class="sure_order_content_word">
                确认订单
            </div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单状态:</span><span class="sure_order_2">转让</span> </div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单信息:</span> <span class="sure_order_3">李雯雯</span><span class="sure_order_3">800001</span></div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">订单价格:</span> <span class="sure_order_3">1.96</span><span class="sure_order_3">元/秒</span></div>
            <div class="sure_order_content_word_1"><span class="sure_order_1">转让时间:</span> <span class="sure_order_3">7200</span><span class="sure_order_3">秒</span></div>
            <div class="sure_order_content_word_1"> <span class="sure_order_1">转让总价:</span><span class="sure_order_2">117.92</span><span class="sure_order_2">元</span><span class="sure_order_4">(含交易手续费0.35元)</span></div>
            <div class="sure_order_content_word_3">
                立即支付
            </div>
        </div>
    </div>
    <script src="../common_js/refresh.js"></script>

    <!--公共的点击预约的加号的按钮的跳转以及点击每页左上角的跳转-->
    <script src="../common_js/onclick_pop_view.js"></script>
    <script src="js/password_input.js"></script>
    <script src='../common_js/vue.js'></script>
    <script src='../common_js/vue-resource.min.js'></script>
    <script>
        new Vue({
            el: 'body',
            data: {
                dindanurl: "http://119.23.224.92/jiandao/startTransaction/myOrder",
                //订单页面数据
                dindandata: [],
                //已购页面数据
                hasbuy: []
            },
            ready: function() {
                var userid = window.localStorage.getItem('userid')
                userid = JSON.parse(userid);
                useridd = userid.user_id;
                var vm = this;
                //订单页面
                vm.$http.get(vm.dindanurl, {
                        params: {
                            userId: 160
                        }
                    })
                    .then(function(response) {
                        var da = response.data;
                        da = JSON.parse(da);
                        dd = da.data
                        for (var i = 0; i < dd.length; i++) {
                            //委托量
                            var oy = dd[i].count,
                                oo = dd[i].surplusCount,
                                op = oy - oo;
                            dd[i].allcount = op;
                            if (dd[i].payType == 0) {
                                dd[i].payType = '未成交'
                            } else if (d[i].payType == 0) {
                                dd[i].payType = '部分成交'
                            } else {
                                dd[i].payType = '已完成'
                            }
                            vm.dindandata.push(dd[i])
                        }
                    }, function(e) {
                        console.log(e)
                    });



                //已购页面
                vm.$http.get("http://119.23.224.92/jiandao/startTransaction/myShares", {
                        params: {
                            userId: 160
                        }
                    })
                    .then(function(response) {
                        var da = response.data;
                        da = JSON.parse(da);
                        dd = da.data
                        console.log(dd);
                        for (var i = 0; i < dd.length; i++) {
                            //持有
                            var oy = dd[i].canSoldCount,
                                oo = dd[i].transactionCount,
                                op = oy + oo;
                            dd[i].hascount = op;


                            //盈亏
                            var lp = dd[i].worth,
                                lo = dd[i].costPrice;
                            dd[i].willmoney = (lp - lo) * op;

                            vm.hasbuy.push(dd[i])
                        }
                    }, function(e) {
                        console.log(e)
                    })
            }
        })
    </script>
    <script type="text/javascript">
        //          点击左上角箭头的跳转
        $(".icon_fanhui").on("click", function() {
            history.go(-1);
        });
        //          点击购买按钮的弹出框
        $(".Business_content_left_buybtn").on("click", function() {
            $(".zhuangranggoumai_pay_1").show();
            $.ajax({
                type: "GET",
                url: "http://119.23.224.92/jiandao/transaction/addJiandaoOrder",
                data: {
                    "userId": 161,
                    "starId": 18903,
                    "price": 10,
                    "count": 1,
                    "state": 1
                },
                success: function(data) {
                    console.log(data)
                },
                error: function(data) {
                    console.log(data)
                }
            })
        });
        //          点击立即支付的弹出框
        $(".sure_order_content_word_3").on("click", function() {
            $(".zhuangranggoumai_pay_1").hide();
            $(".zhuangranggoumai_pay").show();
        });
        //          点击支付宝支付的弹出框
        $(".buy_pay_bottom_shang_1").on("click", function() {
            $(".zhuangranggoumai_pay_2").show();
            $(".zhuangranggoumai_pay").hide();
        });
        //          点击当日委托的跳转
        $("#the_day_dail").on("click", function() {
            location.href = "../appointed_day/appointed_day.html";
        });
        //          点击当日成交的跳转
        $("#the_day_done").on("click", function() {
            location.href = "../day_deal/day_deal.html";
        });
        //          点击历史委托的跳转
        $("#history_depute").on("click", function() {
            location.href = "../historycommission/histroycommission.html";
        });
        //          点击历史成交的跳转
        $("#history_dail").on("click", function() {
            location.href = "../historytransaction/historytrancaction.html";
        });
        //          点击转让的弹出层
        $(".Business_content_left_buybtn_blue").on("click", function() {
            $(".zhuangranggoumai_pay_3").show();
        });
        //          点击立即支付的弹出层
        $(".sure_order_content_word_3").on("click", function() {
            $(".zhuangranggoumai_pay_3").hide();
            $(".zhuangranggoumai_pay").show();
        });
        //          点击支付宝支付的弹出框
        $(".buy_pay_bottom_shang_1").on("click", function() {
            $(".zhuangranggoumai_pay_2").show();
            $(".zhuangranggoumai_pay").hide();
        });

        //          点击取消
        $(".buy_pay_bottom_xia").on("click", function() {
            $(".zhuangranggoumai_pay").hide();
        });
    </script>
    <script src="../common_js/mycomponents.js"></script>
</body>

</html>